<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <div id="videoBox" class="video-box">
      <canvas
        id="canvas"
        ref="canvas"
        :style="{
          width: width + 'px',
          height: height + 'px',
          border: '1px solid #ddd',
        }"
      />
    </div>
  </el-dialog>
</template>

<script>
  import { liveLoop } from '@/api/sys'
  import { loadDynamicScript } from '@/utils'
  let playerInstance = null
  export default {
    name: 'LiveVideo',
    data() {
      return {
        title: '视频在线预览',
        dialogFormVisible: false,
        intervalId: null,
        deviceId: null,
        deviceNo: null,
        width: 760,
        height: 400,
      }
    },
    mounted() {
      loadDynamicScript('static/jsmpeg.min.js', 'jsMpeg', (err) => {
        if (err) {
          console.log('jsmpeg 加载失败！')
        } else {
          console.log('jsmpeg 加载成功！')
        }
      })
    },
    methods: {
      showEdit(row) {
        this.dialogFormVisible = true
        this.deviceId = row.id
        this.deviceNo = row.deviceNo
        this.getFirstLoop()
      },
      close() {
        // console.log(playerInstance)
        this.dialogFormVisible = false
        try {
          if (playerInstance) {
            // if (playerInstance.source && playerInstance.source.socket) {
            //   playerInstance.source.socket.close()
            // }
            // playerInstance.stop()
            playerInstance.destroy()
          }
        } catch (e) {
          console.log(e)
        }
        clearInterval(this.intervalId)
      },
      getFirstLoop() {
        liveLoop(this.deviceId)
          .then((res) => {
            if (res && res.status === 0) {
              const baseVideoUrl =
                process.env.NODE_ENV === 'development'
                  ? '47.93.117.40:18181'
                  : location.host
              const url =
                'ws://' + baseVideoUrl + '/video-ws/send/' + this.deviceNo
              let canvasDom = document.getElementById('canvas')
              const videoBox = document.getElementById('videoBox')
              if (!canvasDom) {
                canvasDom = document.createElement('canvas')
                canvasDom.id = 'canvas'
                canvasDom.style.width = `${this.width}px`
                canvasDom.style.height = `${this.height}px`
                canvasDom.style.border = '1px solid #ddd'
                canvasDom.ref = 'canvas'
                videoBox.appendChild(canvasDom)
              }
              /* eslint-disable */
              playerInstance = new JSMpeg.Player(url, {
                canvas: canvasDom,
                autoplay: true,
              })
              // this.getLoop()
              this.loopCheck()
            } else {
              this.$baseMessage(
                res ? res.msg : '拉流失败！',
                'error',
                'vab-hey-message-error'
              )
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      getLoop() {
        liveLoop(this.deviceId)
          .then(() => {})
          .catch((err) => {
            console.log(err)
          })
      },
      loopCheck() {
        clearInterval(this.intervalId)
        this.intervalId = setInterval(() => {
          this.getLoop(this.deviceId)
        }, 180000)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .video-box {
    padding: 0;
  }
</style>
